<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.w3.org/1999/xhtml"
      layout:decorator="inc/layout"
>
<head>
    <meta charset="UTF-8"/>
    <title>全部笔记</title>

</head>

<body>

<div class="container" layout:fragment="content">
    <div class="row">
        <div class="col-sm-6" style="height: 80px">
            <div class="h3 text-center" th:text="'关键字 '+${key}+':共搜索到'+${noteBookPage.totalElements}+' 条笔记记录'"></div>
        </div>

        <div class="col-sm-6" style="height: 80px">
            <form class="form-inline text-right" action="" method="get">
                <div class="form-group">
                    <div class="input-group">
                        <div class="input-group-addon">笔记名</div>
                        <input type="text" class="form-control" name="key" th:value="${key}" placeholder="hibernate"/>
                    </div>
                </div>
                <button type="submit" class="btn btn-primary">搜索</button>
            </form>
        </div>
    </div>
    <div class="row">


        <div class="col-sm-12">


            <div class="col-sm-2">
                <div class=" panel panel-default">
                    <div class="panel-heading "><i class="fa fa-book"></i>发布笔记</div>
                    <div th:each="n:${noteBookPage.content}" th:if="${n.status==1}" style="margin: 10px 5px">
                        <a th:href="@{'/showNoteBook/'+${n.id}}">
                            <img th:src="${n.img}" class="img-thumbnail" width="30%"/>
                            <div th:text="${n.name}" style="float: right;width: 68%"></div>
                        </a>
                    </div>


                </div>
            </div>
            <div class="col-sm-10">
                <div class="col-sm-6" th:each="c:${noteBookPage.content}">
                    <a th:href="@{'/showNoteBook/'+${c.id}}">
                        <div class="thumbnail" style="height: 120px;padding-top: 10px">
                            <div class="col-sm-4">
                                <img th:src="${c.img}" height="100"/>
                            </div>
                            <div class="col-sm-8">
                                <div class="name h3" th:text="${c.name}"
                                ></div>
                            </div>
                        </div>
                    </a>
                </div>
                <div class="row">
                    <div class="col-sm-10">
                        <nav aria-label="Page navigation">
                            <ul class="pagination">
                                <li class="am-pagination-first ">
                                    <a th:href="@{/ES/noteBookFind(page=1,key=${key})}" class="">第一页</a>
                                </li>
                                <li th:if="${noteBookPage.number > 0}" class="am-pagination-prev ">
                                    <a th:href="@{/ES/noteBookFind(page=${noteBookPage.number},key=${key})}"
                                       class="">上一页</a>
                                </li>
                                <li th:each="i : ${#numbers.sequence(1, noteBookPage.totalPages)}"
                                    th:classappend="${(noteBookPage.number + 1) eq i} ? 'active' : ''">
                                    <a th:href="@{/ES/noteBookFind(page=${i},key=${key})}"
                                       th:text="${i}" class="">1</a>
                                </li>
                                <li th:unless="${noteBookPage.number + 1 == noteBookPage.totalPages}"
                                    class="am-pagination-next ">
                                    <a th:href="@{/ES/noteBookFind(page=${noteBookPage.number} + 2,key=${key})}"
                                       class="">下一页</a>
                                </li>
                                <li class="am-pagination-last" th:if="${noteBookPage.totalPages>5}">
                                    <a th:href="@{/ES/noteBookFind(page=${noteBookPage.totalPages},key=${key})}"
                                       class="">最末页</a>
                                </li>
                                <li class="am-pagination-last ">
                                    <a th:text="'共 '+${noteBookPage.totalElements}+' 条记录'"></a>
                                </li>
                            </ul>
                        </nav>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

</body>
</html>